body {
  font-size: 22px;
}
.outer {
  width: 500px;
  background-color: skyblue;
  border: 1px solid #000;
  padding: 20px;
  /* height: 1500px; */
  position: relative;
  z-index: 8;
  margin-bottom: 20px;
}
.box {
  width: 200px;
  height: 200px;
}
.box1 {
  background-color: #cd3c3c;
  /* 不生效，因为没有设置定位 */
  /* z-index: 1005; */
}
.box2 {
  background-color: #aecd3c;
  /* 定位元素的显示层级⽐普通元素⾼ */
  /* 相对布局不脱离文本流 */
  /* 绝对布局脱离文本流 */
  /* 绝对布局是相对父盒子的概念，如果对应的父盒子没有设置为相对定位，那么它的位置是相对文档根元素 */
  /* position: absolute;
  top: 0; */
  /* left: 100px;
  bottom: 10px; */
  /* position: fixed;
  left: 0;
  top: 0; */
  position: relative;
  left: 50px;
  top: -150px;
  /* 提升层级, 对有定位的元素才会生效 */
  /* z-index: 1000; */
  z-index: 1;
}
.box3 {
  background-color: #6a3ccd;
  position: absolute;
  left: 160px;
  top: 160px;
  z-index: 30;
}
.box4 {
  background-color: bisque;
  position: fixed;
  top: 200px;
  left: 200px;
  z-index: 1000;
}
.box5 {
  width: 200px;
  height: 200px;
  background-color: #1015a5;
  position: fixed;
  top: 230px;
  left: 230px;
  z-index: 10;
}

.outer1 {
  height: 400px;
  background-color: #ccc;
  position: relative;
}
.inner1 {
  /* width: 100px; */
  /* width: calc(100% - 10px); */
  height: 100px;
  background-color: orange;
  font-size: 20px;
  /* padding: 20px;
  border: 20px solid #000; */
  position: absolute;
  /* 子盒子撑满父盒子：子盒子不能设置宽高 */
  /* 子盒子在父盒子中居中，结合margin: auto;使用 */
  /* left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto; */

  left: 50%;
  top: 50%;
  /* X、Y轴的偏移量; */
  /* transform: translate(-50%, -50%); */
  transform: translateX(-50%);
  transform: translateY(-50%);
  /* margin-left: -50px;
  margin-top: -50px; */
}
